<template>
  <s-layout title="分类" tabbar="pages/index/category" :bgStyle="{ color: '#fff' }">
    <view class="s-category">

      <view class="three-level-wrap ss-flex ss-col-top" :style="[{ height: pageHeight + 'px' }]">
        <scroll-view class="side-menu-wrap" scroll-y :style="[{ height: pageHeight + 'px' }]">
          <view
              class="menu-item ss-flex"
              v-for="(item, index) in state.categoryList"
              :key="item.id"
              :class="[{ 'menu-item-active': index == state.activeMenu }]"
              @tap="onMenu(index)"
          >
            <view class="menu-title ss-line-1">
              {{ item.name }}
            </view>
          </view>
        </scroll-view>

        <scroll-view
            class="goods-list-box"
            scroll-y
            :style="[{ height: pageHeight + 'px' }]"
        >

          <view class="mattress-item"  v-for="item in state.pagination.data.content"
                @click="sheep.$router.go('/pages/goods/index', { id: item.id })">
            <img :src="item.pic" alt="商品图片" class="mattress-image"/>
            <div class="mattress-info">
              <h3>{{ item.name }}</h3>
              <span class="price">¥{{ item.price }}</span>
            </div>
          </view>
          <view class="empty-placeholder" v-show="state.good_status">
            <img src="https://mall-device1234.oss-cn-beijing.aliyuncs.com/%E7%A9%BA%E7%AE%B1%E5%AD%90-copy.png" alt="Empty Placeholder" class="placeholder-image"/>
            <p style="text-align: center;font-size: 23rpx">抱歉, 该类别暂无商品</p>
          </view>
        </scroll-view>
        <!--          <image-->
        <!--              v-if="state.categoryList.children[state.activeMenu].image"-->
        <!--              class="banner-img"-->
        <!--              :src="sheep.$url.cdn(state.categoryList.children[state.activeMenu].image)"-->
        <!--              mode="widthFix"-->
        <!--          >-->
        <!--          </image>-->
        <!--          <first-one-->
        <!--              v-if="state.categoryList.style === 'first_one'"-->
        <!--              :data="state.categoryList"-->
        <!--              :activeMenu="state.activeMenu"-->
        <!--              :pagination="state.pagination"-->
        <!--          />-->
        <!--          <first-two-->
        <!--              v-if="state.categoryList.style === 'first_two'"-->
        <!--              :data="state.categoryList"-->
        <!--              :activeMenu="state.activeMenu"-->
        <!--              :pagination="state.pagination"-->
        <!--          />-->
        <!--          <second-one-->
        <!--              v-if="state.categoryList.style === 'second_one'"-->
        <!--              :data="state.categoryList"-->
        <!--              :activeMenu="state.activeMenu"-->
        <!--              :pagination="state.pagination"-->
        <!--          />-->
        <!--          <third-one-->
        <!--              v-if="state.categoryList.style === 'third_one'"-->
        <!--              :data="state.categoryList"-->
        <!--              :activeMenu="state.activeMenu"-->
        <!--              :pagination="state.pagination"-->
        <!--          />-->
        <!--          <uni-load-more-->
        <!--              v-if="-->
        <!--              (state.categoryList.style === 'first_one' ||-->
        <!--                state.categoryList.style === 'first_two') &&-->
        <!--              state.pagination.total > 0-->
        <!--            "-->
        <!--              :status="state.loadStatus"-->
        <!--              :content-text="{-->
        <!--              contentdown: '点击查看更多',-->
        <!--            }"-->
        <!--              @tap="loadmore"-->
        <!--          />-->
        <!--        </scroll-view>-->
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import secondOne from './components/second-one.vue';
import thirdOne from './components/third-one.vue';
import firstOne from './components/first-one.vue';
import firstTwo from './components/first-two.vue';
import sheep from '@/sheep';

import {onLoad, onReachBottom} from '@dcloudio/uni-app';
import {computed, reactive} from 'vue';
import _ from 'lodash';

const state = reactive({
  categoryList: [],
  activeMenu: '0',
  goodsList: [],

  pagination: {
    data: [],
    current_page: 1,
    total: 1,
    last_page: 1,
  },
  loadStatus: '',
  good_status:false
});

const {screenHeight, safeAreaInsets, screenWidth, safeArea} = sheep.$platform.device;
const pageHeight = computed(() => safeArea.height - 44 - 50);

async function getList(options) {

  sheep.$api.category.list({
    id: options.id,
  }).then((res) => {
    // console.log(res);
    state.categoryList = res;
  })

  // const { error, data } = await sheep.$api.category.list({
  //   id: options.id,
  // });
  // console.log(error,data);


}

// if (error === 0) {
// console.log(error,data);
// state.categoryList = data;
// }

const onMenu = (val) => {
  state.good_status=false
  console.log(val);
  state.activeMenu = val;
  getGoodsList(state.categoryList[val].id);

  // if (state.categoryList.style === 'first_one' || state.categoryList.style === 'first_two') {
  //   state.pagination = {
  //     data: [],
  //     current_page: 1,
  //     total: 1,
  //     last_page: 1,
  //   };
  //
  // }
};

async function getGoodsList(id, page = 1, list_rows = 6) {
  state.loadStatus = 'loading';
  // const res = await sheep.$api.goods.list({
  //   category_id: id,
  //   list_rows,
  //   page,
  // });
  state.pagination.data = []
  const params = {
    search:'',
    categoryId: id.toString(),
    orderField: 'sort',
    orderSort: 'desc'
  }
 sheep.$api.goods.list(params).then(res=>{
   console.log(res);
   let couponList = _.concat(state.pagination.data, res);
   console.log(_.isEmpty(couponList[0].content));
   if ( _.isEmpty(couponList[0].content) ){
     // 说明是空的
     console.log("kongde")
     state.good_status = true
   }
   state.pagination.data = couponList[0]
   console.log(state.pagination.data);
 });
  // console.log(res);
  // sheep.$api.goods.list({
  //   category_id: id.toString(),
  // }).then(res => {
  //   let couponList = _.concat(state.pagination.data, res);
  //   state.pagination.data = couponList[0]
  //   console.log(state.pagination.data);
  // })
  //   if (state.pagination.current_page < state.pagination.last_page) {
  //     state.loadStatus = 'more';
  //   } else {
  //     state.loadStatus = 'noMore';
  //   }
  // })
  // if (res.error === 0) {
  //   let couponList = _.concat(state.pagination.data, res.data.data);
  //   state.pagination = {
  //     ...res.data,
  //     data: couponList,
  //   };
  //   if (state.pagination.current_page < state.pagination.last_page) {
  //     state.loadStatus = 'more';
  //   } else {
  //     state.loadStatus = 'noMore';
  //   }
  // }
}

// 加载更多
function loadmore() {
  if (state.loadStatus !== 'noMore') {
    getGoodsList(
        state.categoryList.children[state.activeMenu].id,
        state.pagination.current_page + 1,
    );
  }
}

onLoad(async (options) => {
  await getList(options);
  getGoodsList('68');

});
onReachBottom(() => {
  loadmore();
});
</script>

<style lang="scss" scoped>
.empty-placeholder{
  margin-top: 50%;
  //transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.placeholder-image {
  width: 300rpx;
  height: 300rpx;
  object-fit: cover;
  margin-bottom: 20px;
}

.mattress-item {
  display: flex;
  margin-bottom: 10rpx;
  padding: 5rpx;

  .mattress-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-right: 20px;
    border-radius: 6px;
    border: 1px solid #dacece;
  }

  .mattress-info {
    flex: 1;
    h3 {
      font-size: 28rpx;
      color: #333;
      margin: 0;
    }

    p {
      font-size: 14px;
      color: #666;
      margin: 10px 0;
    }

    .price {
      display: flex;
      flex-direction: column;
      margin-top: 40rpx;
      font-size: 23rpx;
      color: red;
    }
  }
}
.s-category {
  :deep() {
    .side-menu-wrap {
      width: 200rpx;
      height: 100%;
      padding-left: 12rpx;
      background-color: #f6f6f6;

      .menu-item {
        width: 100%;
        height: 88rpx;
        position: relative;
        transition: all linear 0.2s;

        .menu-title {
          line-height: 32rpx;
          font-size: 30rpx;
          font-weight: 400;
          color: #333;
          margin-left: 28rpx;
          position: relative;
          z-index: 0;

          &::before {
            content: '';
            width: 64rpx;
            height: 12rpx;
            background: linear-gradient(
                    90deg,
                    var(--ui-BG-Main-gradient),
                    var(--ui-BG-Main-light)
            ) !important;
            position: absolute;
            left: -64rpx;
            bottom: 0;
            z-index: -1;
            transition: all linear 0.2s;
          }
        }

        &.menu-item-active {
          background-color: #fff;
          border-radius: 20rpx 0 0 20rpx;

          &::before {
            content: '';
            position: absolute;
            right: 0;
            bottom: -20rpx;
            width: 20rpx;
            height: 20rpx;
            background: radial-gradient(circle at 0 100%, transparent 20rpx, #fff 0);
          }

          &::after {
            content: '';
            position: absolute;
            top: -20rpx;
            right: 0;
            width: 20rpx;
            height: 20rpx;
            background: radial-gradient(circle at 0% 0%, transparent 20rpx, #fff 0);
          }

          .menu-title {
            font-weight: 600;

            &::before {
              left: 0;
            }
          }
        }
      }
    }

    .goods-list-box {
      background-color: #fff;
      width: calc(100vw - 100px);
      padding: 10px;
    }

    .banner-img {
      width: calc(100vw - 130px);
      border-radius: 5px;
      margin-bottom: 20rpx;
    }
  }
}
</style>
